<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类别管理</title>
    <!-- 引入Vue 3 -->
    <script src="static/js/vue3.4.15.global.min.js"></script>
    <!-- 引入Tailwind CSS -->
    <!-- <script src="static/js/tailwind.3.4.17.js"></script> -->
    <link href="static/css/tailwind3.4.17.css" rel="stylesheet">     
    <!-- 引入Font Awesome图标 -->
    <link href="static/css/font-awesome.min.4.7.0.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen flex flex-col overflow-y-overlay">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex h-16">
                <div class="flex items-center">
                    <span class="text-primary text-xl font-bold flex items-center">
                        <i class="fa fa-wrench mr-2"></i>
                        信息系统
                    </span>
                </div>
                <div class="flex-grow"></div> <!-- 用于占据中间的空间 -->
                <div class="flex items-center space-x-4">
                    <a href="/query" class="text-secondary hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-search mr-1"></i> 查询
                    </a>
                </div>                
                <div class="flex items-center space-x-4">
                    <a href="/upload" class="text-secondary hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-upload mr-1"></i> 上传
                    </a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="/category_page" class="text-primary  hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom bg-primary/10">
                        <i class="fa fa-regular fa-list mr-1"></i> 分类
                    </a>
                </div>     
                 <!-- <div class="flex items-center space-x-4">
                    <a href="/history_page" class="text-secondary hover:text-primary/90 px-3 py-2 rounded-md text-sm font-medium transition-custom ">
                        <i class="fa fa-history mr-1"></i> 历史
                    </a>
                </div>                                  -->
            </div>
        </div>
    </nav>

    <div id="app" class="flex-grow">
    <!-- 主内容区 -->
    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8" >
        <div class="bg-white rounded-xl shadow-soft p-6 md:p-8 mb-8 border border-gray-200 shadow-md">
            <h1 class="text-2xl md:text-3xl font-bold text-dark mb-6">分类管理</h1>
            <form @submit="handleAddCategory" class="space-y-6">
                <div>
                    <label for="name" class="text-gray-700 block mb-1">名称</label>
                    <div>
                        <input
                            id="name"
                            v-model="name"
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-primary/50 focus:border-primary transition-custom"
                            placeholder="请输入您的分类..."
                            required
                            style="height: 50px;"
                        >
                    </div>
                </div>
                <div>
                    <label for="desc" class="text-gray-700 block mb-1">分类描述</label>
                    <div>
                        <textarea
                            id="desc"
                            v-model="desc"
                            rows="2"
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-primary/50 focus:border-primary transition-custom"
                            placeholder="请输入您的分类描述..."
                        ></textarea>
                    </div>
                </div>              
                <div class="flex  sm:flex-row  items-start sm:items-center space-y-4 sm:space-y-0">
                    <div class="flex items-center">
                    </div>
                    <div class="flex-grow"></div> <!-- 用于占据中间的空间 -->
                    <button
                        type="submit"
                        class="inline-flex items-center px-6 py-1 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom mr-2"
                    >
                        <i class="fa fa-plus mr-2"></i> 添加
                    </button>
                    <button
                        type="button"
                        @click="handleDeleteCategory"
                        class="inline-flex items-center px-6 py-1 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom"
                    >
                        <i class="fa fa-trash mr-2"></i> 删除
                    </button>                    
                </div>
            </form>
        </div>

        <!-- 加载指示器  -->
        <div v-if="loading" class="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 transition-custom">
            <div class="bg-white rounded-xl shadow-soft p-8 flex flex-col items-center">
                <span class="inline-block animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-primary mb-4"></span>
                <span class="text-base text-gray-600">正在处理您的请求，请稍候...</span>
            </div>
        </div>

        <div class="container border border-gray-200 shadow-md ">
            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400  shadow-md  shadow-soft">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                <th scope="col" class="p-4">
                    <div class="flex items-center">
                    <input 
                        id="checkbox-all" 
                        type="checkbox" 
                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                        :checked="isAllSelected()"
                        @change="toggleSelectAll"
                    >
                    <label for="checkbox-all" class="sr-only">checkbox</label>
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    名称
                </th>
                <th scope="col" class="px-6 py-3">
                    描述
                </th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="categories.length === 0" class="bg-white border-b">
                    <td colspan="3" class="px-6 py-8 text-center text-gray-500">
                        暂无分类数据
                    </td>
                </tr>
                <tr 
                    v-for="(category, index) in categories" 
                    :key="category.name"
                    class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
                >
                    <td class="w-4 p-4">
                        <div class="flex items-center">
                        <input 
                            :id="`category-${index}`" 
                            type="checkbox" 
                            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                            :checked="isCategorySelected(category.name)"
                            @change="toggleCategorySelection(category.name)"
                        >
                        <label :for="`category-${index}`" class="sr-only">checkbox</label>
                        </div>
                    </td>
                    <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        {{ category.name || '未命名' }}
                    </td>
                    <td class="px-6 py-4">
                        {{ category.desc || '无描述' }}
                    </td>
                </tr>
            </tbody>
            </table>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <p class="text-center text-sm text-gray-500">个人信息系统 © 2025</p>
        </div>
    </footer>

    <!-- 移动端菜单按钮 -->
    <button class="fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg z-50 md:hidden" @click="alert('移动端菜单功能尚未实现')">
        <i class="fa fa-bars"></i>
    </button>
    
    <!-- 错误提示 -->
    <div v-if="showError" class="fixed bottom-20 right-6 bg-red-50 border-l-4 border-red-400 p-4 z-50 rounded-md shadow-lg">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fa fa-exclamation-circle text-red-400"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-red-700">{{ errorMessage }}</p>
            </div>
            <button @click="closeError" class="ml-auto text-gray-500 hover:text-gray-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
    </div>
    </div> <!-- <div id="app"> -->

    <!-- 引入外部JavaScript文件 -->
    <script src="static/js/category.js"></script>
</body>
</html>